<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECU特性映射视图</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
{#    <link rel="stylesheet" type="text/css" href="/static/css/admin.css" />#}
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 12px auto; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: center; }
        th { background-color: #f2f2f2; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; margin-top: 8px; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .btn:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-container">
            <button type="button" class="btn layui-btn layui-btn-normal" onclick="enterStep2()">
                 下一步 <i class="layui-icon layui-icon-next"></i></button>
            <input type="checkbox" name="allowEdit" lay-skin="switch" lay-text="允许编辑|禁止编辑" lay-filter="allowEditSwitch">
        </div>
        <div class="layui-form" id="table-list" style="background-color: black; width: 100%; height: 100%;">
            <table class="layui-hide" id="ecuFeatureTable" lay-filter="ecuFeatureTable"></table>
        </div>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'layer', 'form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var windowHeight = window.innerHeight;
            var tableHeight = windowHeight - 80; // 减去其他元素的高度和一些边距

            // 渲染表格
            table.render({
                elem: '#ecuFeatureTable',
                url: '/getEcuFeatureView',
                height: tableHeight,
                cols: [], // 初始化为空
                request: {
                    pageName: 'page', // 页码的参数名称，默认：page
                    limitName: 'limit' // 每页数据量的参数名，默认：limit
                },
                response: {
                    statusName: 'code', // 数据状态的字段名称，默认：code
                    statusCode: 0, // 成功的状态码，默认：0
                    msgName: 'msg', // 状态信息的字段名称，默认：msg
                    countName: 'count', // 数据总数的字段名称，默认：count
                    dataName: 'data' // 数据列表的字段名称，默认：data
                },
                done: function (res, curr, count) {
                    // 获取列名
                    var columns = Object.keys(res.data[0]);
                    console.log("columns: ", columns);
                    // 确保 ecu_abbr 在第一列
                    var cols = [[]];
                    cols[0].push({
                        field: 'ecu_abbr', title: 'ECU',
                        width: 150, align: 'center', fixed: 'left' // 冻结首列
                    });

                    // 动态生成其他列配置
                    columns.forEach(column => {
                        if (column !== 'ecu_abbr' && !column.startsWith('LAY_'))  {
                            cols[0].push({
                                field: column,
                                title: column,
                                width: 90,
                                align: 'center',
                                sort: true,
                                templet: function(d) {
                                    return d[column] === '√' ? '<input type="checkbox" checked>' : '<input type="checkbox">';
                                }
                            });
                        }
                    });

                    // 重新渲染表格
                    table.render({
                        elem: '#ecuFeatureTable',
                        url: '/getEcuFeatureView',
                        height: tableHeight,
                        cols: cols,
                        request: {
                            pageName: 'page', // 页码的参数名称，默认：page
                            limitName: 'limit' // 每页数据量的参数名，默认：limit
                        },
                        response: {
                            statusName: 'code', // 数据状态的字段名称，默认：code
                            statusCode: 0, // 成功的状态码，默认：0
                            msgName: 'msg', // 状态信息的字段名称，默认：msg
                            countName: 'count', // 数据总数的字段名称，默认：count
                            dataName: 'data' // 数据列表的字段名称，默认：data
                        },
                        done: function () {
                            console.log('表格渲染完成');

                            // 监听表格的行双击事件
                            table.on('rowDouble(ecuFeatureTable)', function (obj) {
                                var selectedData = obj.data;
                                var rowIndex = obj.tr.data('index'); // 获取当前行的索引
                                layer.msg('双击的行号: ' + (rowIndex + 1)); // 弹出提示框显示行号
                                console.log('selectedData = ' + selectedData);
                            });

                            table.on('checkbox(ecuFeatureTable)', function(obj){
                                // obj.checked 是否被选中
                                // obj.data 当前行的数据
                                // obj.type 事件类型，如：all、one
                                console.log('checked: ',obj.checked );
                                if(obj.type === 'one' && obj.checked){
                                    // 当单个复选框被选中时，可以在这里处理
                                    console.log('Checkbox checked:', obj.data);
                                    // 执行您的逻辑，例如发送 AJAX 请求
                                }
                            });
                        }
                    });
                }
            });

            // 监听编辑开关
            form.on('switch(allowEditSwitch)', function(data){
                if (data.elem.checked) {
                    layer.msg('允许编辑');
                } else {
                    layer.msg('禁止编辑');
                }
            });

            // 下一步按钮点击事件
            window.enterStep2 = function () {
                fetch('/enter_step2', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                    // 可以在这里添加跳转到下一步的逻辑
                });
            };
        });
    </script>
</body>
</html>